<template>
    <div class="table">
        <!-- 页面表格begin -->
        <div class="crumbs">
            <!-- 页面标题begin -->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-tickets"></i> 角色资源管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 页面标题end-->
        <div class="container">
            <!-- 页面内容区begin -->
            <div id="app">
                <div style=" width:50%;float:left;">
                    <div>
                        角色名称：
                        <el-input v-model="s_rolename" label="角色编码" placeholder="角色编码" style="width:200px; heght:30px;" size="mini"></el-input>
                        角色编码：
                        <el-input v-model="s_rolecode" label="角色编码" placeholder="角色编码" style="width:200px; heght:30px;" size="mini"></el-input>
                        <el-button type="success" icon="el-icon-search" @click="getResult(1)" size="mini">搜索</el-button>

                    </div>

                    <!--表格数据及操作-->
                    <el-table :data="tableData" class="mgt20" border style="width: 100%" stripe ref="multipleTable" tooltip-effect="dark" @row-click="clickRow">
                        <!--勾选框-->
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <!--索引-->
                        <el-table-column type="index" :index="indexMethod">
                        </el-table-column>
                        <el-table-column prop="roleName" label="角色名称" width="180" sortable>
                        </el-table-column>
                        <el-table-column prop="roleCode" label="角色编码" width="180">
                        </el-table-column>
                        <el-table-column prop="roleType" label="角色类型">
                        </el-table-column>
                        <el-table-column prop="id" label="id">
                        </el-table-column>
                    </el-table>
                    <br>
                    <br>
                    <!--分页条total, sizes, prev, pager, next, jumper-->
                    <el-pagination @size-change="handleSizeChange" @current-change="getResult" :current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next" :total="roletotal">
                    </el-pagination>
                </div>
                <div style=" width:45%;float:right;">
                    <el-button type="success" icon="el-icon-search" @click="saveRoleacl" size="mini">保存</el-button>
                    <el-tree :data="treeData" class="mgt20" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :check-strictly=true :props="defaultProps">
                    </el-tree>
                </div>
            </div>
        </div>
        <!-- 页面内容区end-->
    </div>
    <!-- 页面表格end -->
</template>
<script>
export default {
    data() {
        return {
            tableData: [],
            roleTypeData: [],
            treeData: [],
            input: "",
            curentroleid: "",
            curentrow: null,
            //列表Loading加载   
            listLoading: false,
            //添加按钮Loading加载
            addLoading: false,
            roletotal: 0,
            currentPage: 1,
            pageSize: 10,
            //检索字段
            s_rolename: "",
            s_rolecode: "",
            //     s_roleType:"",
            defaultProps: {
                children: 'children',
                label: 'name'
            },

        }
    },

    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        indexMethod(index) {
            return index;
        },
        //获取角色列表
        getResult: function(val) {

            var _this = this;
            this.listLoading = true;
            let param = Object.assign({}, { currentPage: val, pageSize: 10, roleName: this.s_rolename, roleCode: this.s_rolecode });
            this.$ajax({
                method: "post",
                url: "/api/sysrole-api/querySysRoleList",
                data: param
            }).then(
                function(resultData) {

                    _this.tableData = resultData.data.data;
                    _this.roletotal = resultData.data.count;
                    _this.listLoading = false;
                },
                function(resultData) {
                    // _this.tableData.message = "Local Reeuest Error!";
                    //console.log(resultData);
                }
                );

        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getResult(1);

        },
        getresourceData() {
            var _this = this;
            //this.listLoading = true;  

            let param = Object.assign({}, {});
            this.$ajax({
                method: "post",
                url: "/api/sysResource_api/getSysResourceList",
                data: param
            }).then(
                function(resultData) {
                    _this.treeData = resultData.data.data;
                    // console.log(JSON.stringify(_this.treeData));

                },
                function(resultData) {
                    // _this.tableData.message = "Local Reeuest Error!";
                    //console.log(resultData);
                }
                );
        },
        clickRow: function(row) {
            var _this = this;
            _this.roleuserSelect = [];
            _this.curentroleid = row.id;
            _this.curentrow = row;
            let param = Object.assign({}, { roleId: _this.curentroleid });
            this.$ajax({
                method: "post",
                url: "/api/sysAcl-api/getSysAclList",
                data: param
            }).then(
                function(resultData) {
                    let list = [];

                    resultData.data.data.forEach(item => {
                        list.push(item.resoureId);
                    });
                    //alert(list);
                    console.log(JSON.stringify(list))
                    _this.$refs.tree.setCheckedKeys(list);

                },
                function(resultData) {
                    // _this.tableData.message = "Local Reeuest Error!";
                    //console.log(resultData);
                }
                );


        },

        saveRoleacl: function() {
            var _this = this;
            if (this.curentroleid == "") {
                alert("请选择要添加的角色，单击选择行。");
            }
            var sellist = this.$refs.tree.getCheckedKeys();
            //    var treeNodes = this.$refs.tree.getCheckedNodes(true);
            //    for(var i = 0; i < treeNodes.length; i++) {
            //    if(sellist.indexOf(treeNodes[i].parentId)<0){
            //     sellist.push(treeNodes[i].parentId);
            //    }
            //    }
            var roleid = this.curentroleid;
            if (sellist.length > 0) {

                this.listLoading = true;
                let param = Object.assign({}, { id: 0, roleId: roleid, resourceids: sellist });
                this.$ajax({
                    method: "post",
                    url: "/api/sysAcl-api/insertSysAcl",
                    data: param
                }).then(
                    function(resultData) {
                        alert(resultData.data.message);
                        _this.clickRow(_this.curentrow);

                    }
                    );
            }

        }

    },
    mounted() {
        //获取列表
        this.getResult();
        this.getresourceData();


    }
};
</script>
<style>
/* #app {
        font-family: Helvetica, sans-serif;
        text-align: center;
    } */

#roleuser {
    font-family: Helvetica, sans-serif;
    text-align: center;
}

el-input {
    width: 200px;
    height: 50px;
}
</style>